{% extends "PATHomeBundle::base.html.twig" %}
{% block body %}
       <div class="tunnelCartImg">
            <div class="tunnelShoppingCart"></div>
            <div class="tunnelTruck"></div>
            <div class="tunnelCardsOff"></div>
            <div class="tunnelOrderOff"></div>
        </div>
        <h1>Choix de l'adresse de livraison</h1>
        {% if addressArray is defined %}
        
        <div class="tunnelCartAddresses">
            <div class="address">
                    <div class="addressChoiceName"><br /></div>
                    <div class="deliveryAddressChoice"> Livraison</div>
                    <div class="paymentAddressChoice"> Facturation</div>
            </div>
            {% for address in addressArray %}
                <div class="address">
                    <div class="addressChoiceName">{{address.street}}, {{ address.postalCode }}<br /> {{ address.city }}, {{ address.country }}</div>
                    <div class="deliveryAddressChoice"><input type="radio" name="delivery" value="{{ address.id }}" class="deliveryAddressRadio" id="" checked="checked" /></div>
                    <div class="paymentAddressChoice"><input type="radio" name="payment" value="{{ address.id }}" class="paymentAddressRadio" id="" checked="checked" /></div>
                </div>
            {% endfor %}
        </div>
        
        <div class="addAddressForm">
            <h3>Ajouter une adresse</h3>
            <form action="{{ path('pat_cart_displaysteps', { 'step':'2' }) }}" method="post" {{form_enctype(form)}} >
                {{ form_widget(form) }}
                    <input type="submit" class="generic_link" value="Ajouter"/>
            </form>
        </div>

        {% endif %}
    <a href="#" onClick="javascript:history.back();" class="generic_link">Retour</a>
    <form action="{{ path('pat_cart_displaysteps', { 'step':'3' }) }}" method="post" >
        <input type="hidden" class="validateAddressChoice" value="_1.1" name="hiddenField" />
        <input type="submit" class="generic_link"  value="Valider"/>
    </form>
    <h1>...ou choisir un point relais</h1>
    <div id="relais" style="width:300px;margin:auto;text-align:center;"></div>
    <div id="mapsRelais" style="width:600px;height:400px;margin:auto;"></div>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyAOXlU-XcOJmJ4vW8FcXM5aWRc9Gwk59qc&sensor=false"></script>
    <script type="text/javascript">   	
    	// relais lingo centre
    	var r1 = new google.maps.LatLng(48.558077,7.684314);
    	// relais montagne verte
    	var r2 = new google.maps.LatLng(48.572873,7.715964);
    	
	    if(navigator.geolocation) {
	    	var iconMarkerBlue = new google.maps.MarkerImage("{{ asset('bundles/pathome/images/pinblue.png') }}");
			navigator.geolocation.getCurrentPosition(function(position) {
				var lat = position.coords.latitude;
				var longitude = position.coords.longitude;
			  	var centerpos = new google.maps.LatLng(lat,longitude);
				var optionsGmaps = {
				     center:centerpos,
				     mapTypeId: google.maps.MapTypeId.ROADMAP,
				     zoom: 12
				};
				var map = new google.maps.Map(document.getElementById("mapsRelais"), optionsGmaps);
				var marker = new google.maps.Marker({
				      position: centerpos,
				      map: map,
				      icon : iconMarkerBlue,
				      title:"Vous êtes ici"
				});
				var markerR1 = new google.maps.Marker({
				      position: r1,
				      map: map,
				      title:"Relais colis"					     
				});
				var markerR2 = new google.maps.Marker({
				      position: r2,
				      map: map,
				      title:"Relais colis"
				});
				var distanceR1 = google.maps.geometry.spherical.computeDistanceBetween(centerpos, r1);
				document.getElementById("relais").innerHTML = "relais colis 1 à <b>"+Math.round(distanceR1/100)/10 + "km</b>";
				var distanceR2 = google.maps.geometry.spherical.computeDistanceBetween(centerpos, r2);
				document.getElementById("relais").innerHTML += "<br>relais colis 2 à <b>"+Math.round(distanceR2/100)/10 +"km</b>";
			});	    	
	    }
	    else alert("Votre navigateur n'est pas compatible avec la localisation");		
    </script>
{% endblock %}